(() => {
    new Vue({
        el: '.no',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            Index: 0,//所选专业的下标
            sumStudentArr: [],
            sumClassArr: []
        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.getSumStudent()
            this.getSumClass()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getGauge/getSumStudent'),      
                        axios.get('http://localhost:8001/getGauge/getSumClass'),   
                    ])
                    .then(response => (
                        this.resdata = response
                        // ,console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                }, 500)
            },


            getSumStudent() {
                this.sumStudentArr.length = 0
                setTimeout(() => {          
                    this.sumStudentArr = this.Data[0][0].sumStudent      
                    // console.log("this.sumStudentArr:", this.sumStudentArr)
                }, 555)                        
            },

            getSumClass() {
                this.sumClassArr.length = 0
                setTimeout(() => {          
                    this.sumClassArr = this.Data[1][0].sumClass      
                    // console.log("this.sumClassArr:", this.sumClassArr)
                }, 555)                        
            },

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {
                    myChart = echarts.init(document.querySelector(".no"));
                    
                   var option = {
                        tooltip: {
                            formatter: "{a} <br/>{c} {b}"
                        },
                        series: [{
                                type: 'gauge',
                                min: 0,
                                max: 8,
                                splitNumber: 8,
                                radius: '95%',
                                center: ["15%", "50%"],
                                axisLine: { 
                                    lineStyle: { 
                                        width: 10,
                                        color: [
                                            [0.4, '#203add'],
                                            [1, '#0d1758']
                                        ]
                                    },
                                    backgroundColor: "none"
                                },                       
                                axisTick: { 
                                    length: 12, 
                                    lineStyle: { 
                                        color: 'auto'
                                    }
                                },
                                splitLine: { 
                                    length: 5, 
                                    lineStyle: { 
                                        color: 'rgba(255,255,255,0.7)',
                                    }
                                },
                                axisLabel: {
                                    borderRadius: 1,
                                    color: 'rgba(255,255,255,0.7)',
                                    padding: 1,
                                },
                                title: {
                                    fontSize: 12,
                                    color: "rgba(250,250,250,0.6)",
                                    paddingTop: 10,
                                    offsetCenter: [0, '90%']
                                },
                                itemStyle: {
                                    color: '#1092ff',
                                },
                                detail: {
                                    textBorderWidth: 1,
                                    textShadowBlur: 1,
                                    textShadowColor: 'rgba(250,250,250,0.6)',
                                    paddingTop: 10,	                  
                                    fontSize: 12,	                 
                                    color: '#fff',	                  
                                    offsetCenter: [0, '65%'],
                                    formatter: function(value) {
                                        // console.info(value)
                                        return ((value*1000) + "人");
                                    }
                                },
                                data: [{
                                    value: this.sumStudentArr/1000,
                                    name: '学院人数'
                                }]
                            },
                            {
                                name: '专业数量',
                                type: 'gauge',
                                min: 0,
                                max: 8,
                                splitNumber: 8,
                                radius: '95%',
                                center: ["50%", "50%"],
                                axisLine: { 
                                    lineStyle: { 
                                        width: 10,
                                        color: [
                                            [0.4, '#203add'],
                                            [1, '#0d1758']
                                        ]
                                    },
                                    backgroundColor: "none"
                                },
                                axisTick: { 
                                    length: 12,
                                    lineStyle: { 
                                        color: 'auto'
                                    }
                                },                             
                               axisTick: { 
                                   length: 12,
                                   lineStyle: { 
                                       color: 'auto'
                                   }
                               },
                               splitLine: { 
                                   length: 5, 
                                   lineStyle: { 
                                       color: 'rgba(250,250,250,0.6)',
                                   }
                               },
                               axisLabel: {
                                   borderRadius: 1,
                                   color: 'rgba(250,250,250,0.6)',
                                   padding: 1,
                               },
                              title: {
                                  fontSize: 12,
                                  color: "rgba(250,250,250,0.6)",
                                  paddingTop: 10,
                                  offsetCenter: [0, '90%']
                              },
                                itemStyle: {
                                    color: '#1092ff'
                                },
                                detail: {
                                    textBorderWidth: 1,
                                    textShadowBlur: 1,
                                    textShadowColor: 'rgba(250,250,250,0.6)',
                                    paddingTop: 10,	                  
                                    fontSize: 12,	                 
                                    color: '#fff',	                  
                                    offsetCenter: [0, '65%'],
                                    formatter: function(value) {
                                        return (value + "个");
                                    }
                                },
                                data: [{
                                    value: 8,
                                    name: '专业数量'
                                }]
                            },
                            {
                             type: 'gauge',
                             min: 0,
                             max: 8,
                             splitNumber: 8,
                             radius: '95%',
                                center: ["85%", "50%"],
                                axisLine: { 
                                    lineStyle: { 
                                        width: 10,
                                        color: [
                                            [0.4, '#203add'],
                                            [1, '#0d1758']
                                        ]
                                    },
                                    backgroundColor: "none"
                                },
                                axisTick: { 
                                    length: 12, 
                                    lineStyle: { 
                                        color: 'auto'
                                    }
                                },
                                splitLine: { 
                                    length: 5, 
                                    lineStyle: { 
                                        color: 'rgba(255,255,255,0.7)',
                                    }
                                },                               
                                axisLabel: {
                                    borderRadius: 1,
                                    color: 'rgba(255,255,255,0.7)',
                                    padding: 1,
                                },
                                title: {
                                    fontSize: 12,
                                    color: "rgba(250,250,250,0.6)",
                                    paddingTop: 10,
                                    offsetCenter: [0, '90%']
                                },
                                itemStyle: {
                                    color: '#1092ff'
                                },
                                detail: {
                                   textBorderWidth: 1,
                                   textShadowBlur: 1,
                                   textShadowColor: 'rgba(250,250,250,0.6)',
                                   paddingTop: 10,	                  
                                   fontSize: 12,	                 
                                   color: '#fff',	                  
                                   offsetCenter: [0, '65%'],
                                    formatter: function(value) {
                                        return (value*10 + "个");
                                    }
                                },
                                data: [{
                                    value: this.sumClassArr/10,
                                    name: '班级个数'
                                }]
                            }
                        ]
                    }
                  
                  myChart.setOption(option);
                  window.addEventListener("resize", function() {
                      myChart.resize();
                  });
                }, 600)
            }
            //=====echarts======

            

        }
       

    })
})();